<!--
 * @Author: your name
 * @Date: 2021-11-04 18:58:55
 * @LastEditTime: 2021-11-05 14:41:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-app2\src\views\Home.vue
-->
<template>
  <div class="home">
    <!-- 标题 -->
    <van-nav-bar title="家政服务" />

    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <!-- 轮播图 -->
    <swipper />

    <!-- 宫格 -->
  <van-grid :gutter="10">
    <van-grid-item v-for="item in grid_data" :key="item.id" :icon="item.icon" :text="item.name" @click="toMenu(item)" />
  </van-grid>

  <!-- 标签栏 -->
  <tabbar />
  </div>
</template>

<script>
import Swipper from '../components/Swipper.vue'
import Tabbar from '../components/Tabbar.vue'
import { get } from '../utils/axios'
export default {
  name: 'Home',
  components: {
    Swipper,
    Tabbar
    
  },

  data(){
    return{
      grid_data:[],//分类数据
      index:"",//记录点击的宫格项的索引
    }
  },

  methods:{
    // 获取分类
    getGridData(){
      get('/productCategory/pageQuery',{page:1,pageSize:999}).then((res)=>{
        console.log(res.data.list)
        this.grid_data=res.data.list;
      })
    },

    // 跳转到详情菜单
    toMenu(e){
      // 记录点击分类项的索引
      this.index=this.grid_data.indexOf(e)
      // console.log(this.index)
      // 跳转
      this.$router.push({path:'/menu',query:{index:this.index}})
    },


  },

  created(){
    this.getGridData()
  }

}
</script>

<style>

</style>
